<template>
  <div class="charge container">
    <div class="title">
      <div class="back" @click="back"><</div>
      在线充值
    </div>
    <div class="meter-title">
      上海派十梯能源科技有限公司
    </div>
    <div class="meter-address">
      派能大厦A座102室
    </div>

    <div class="meter">
      <div class="meter-row meter-row-title">
        <label class="label">电表编号</label>
        <div class="text">2019004526</div>
      </div>
      <div class="detail">
        <div class="status arrearage">
          <img src="../../public/images/meters/METER@2x(1).png"/>
          <div class="text">停电欠费</div>
        </div>
        <div class="energy">
          <div class="meter-row">
            <label class="label">当前剩余金额</label>
            <div class="text">2.6
              <div class="suffix">元</div>
            </div>
          </div>
          <div class="meter-row">
            <label class="label">累计购电金额</label>
            <div class="text">1600
              <div class="suffix">元</div>
            </div>
          </div>
          <div class="meter-row">
            <label class="label">累计购电次数</label>
            <div class="text">16
              <div class="suffix">次</div>
            </div>
          </div>
          <div class="btns">
            <button class="btn btn-read">读表状态</button>
          </div>
        </div>
      </div>
    </div>

    <div class="meter">
      <div class="meter-row meter-row-title">
        <label class="label">
          <i class="icon-money"></i>
          充值金额
        </label>
      </div>
      <div class="money-area">
        <div class="amount">
          <input type="text"/>
          <div class="suffix">元</div>
        </div>
        <div class="unit">0.6元/度</div>
      </div>
    </div>
    <div class="meter">
      <div class="meter-row meter-row-title">
        <label class="label">
          <i class="icon-dot"></i>
          支付方式
        </label>
      </div>
      <div class="pay-methods">
        <div :class="'pay-method '+(payMethod=='wx'?'active':'')" @click="changePayMethod('wx')">
          <i class="icon-radio"></i>
          <div class="text">微信支付</div>
        </div>
        <div :class="'pay-method '+(payMethod=='yl'?'active':'')" @click="changePayMethod('yl')">
          <i class="icon-radio"></i>
          <div class="text">银联支付</div>
        </div>
      </div>
    </div>
    <div class="btns">
      <button class="btn btn-charge">
        充值
      </button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Change",
    data() {
      return {
        payMethod: 'wx',
      }
    },
    methods: {
      back() {
        this.$router.push({path: 'meters'})
      },
      changePayMethod() {

      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../style/scss_common";

  .charge {
    .title {
      margin-bottom: j(40);
    }

    .meter-address {
      margin-bottom: j(32);
    }

    .meter-row-title {
      margin-left: 0;

      .label {
        font-size: j(36);

        i {
          width: j(40);
          height: j(40);
          display: inline-block;
          top: j(6);
          position: relative;
        }
      }
    }

    .btn-read {
      width: j(240);
      height: j(68);
      font-size: j(36);
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: rgba(52, 55, 64, 1);
      line-height: j(48);
    }

    .icon-money {
      background: url("../../public/images/charge/icon@2x(1).png") no-repeat;
      background-size: j(40) j(40);
    }

    .icon-dot {
      background: url("../../public/images/charge/icon@2x.png") no-repeat;
      background-size: j(40) j(40);
    }

    .money-area {
      display: flex;

      .amount {
        display: flex;
        background: rgba(109, 114, 120, 1);
        border-radius: j(8);
        height: j(92);
        margin-right: j(40);

        input {
          font-size: j(60);
          font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
          font-weight: bold;
          color: rgba(250, 216, 0, 1);
          line-height: j(80);
          text-align: center;
          padding: j(10);
          width: j(340);
        }

        .suffix {
          color: rgba(159, 166, 175, 1);
          font-size: j(28);
          font-family: MicrosoftYaHei;
          line-height: j(92);
          margin-right: j(20);
        }
      }

      .unit {
        font-size: j(28);
        font-family: MicrosoftYaHei;
        color: rgba(159, 166, 175, 1);
        line-height: j(92);
      }
    }

    .pay-methods {
      margin-top: j(36);

      .pay-method {
        display: flex;
        margin-bottom: j(24);

        .icon-radio {
          display: inline-block;
          width: j(36);
          height: j(36);
          border-radius: j(4);
          border: j(2) solid rgba(109, 114, 120, 1);
          position: relative;
        }

        &.active .icon-radio::before {
          content: '';
          position: absolute;
          width: j(12);
          height: j(12);
          background: rgba(0, 200, 255, 1);
          left: j(12);
          top: j(12);
        }

        .text {
          margin-left: j(36);
          height: j(38);
          font-size: j(28);
          font-family: MicrosoftYaHei;
          color: rgba(159, 166, 175, 1);
          line-height: j(38);
        }
      }
    }

    .btn-charge {
      width: j(320);
      height: j(92);
      font-size: j(48);
      line-height: j(62);
      margin: 0 auto j(40);
      display: block;
    }
  }
</style>
